<template id="OrdersAppraise">
  <!-- 2023年4月4日 李琛 订单评价 -->
  <div style="">
     <div class="div_1">
         <div class="div_2">追加评价</div>
          <el-card shadow="always" style="width:75%;height:100%;margin: 0 auto;margin-top:20px;margin-bottom:20px;padding-bottom:20px">
            <el-col :span="9">
              <el-image :src='`http://101.43.223.224:8765/image/getImageById?id=${this.$route.query.imageId}`' class="img_1"></el-image>
              <p style="margin-left:30px;margin-top:30px">{{this.$route.query.commodityName}}</p>
            </el-col>
            <el-col :span="15">
              <el-form  :model="OrdersAppraise" ref="OrdersAppraise" :rules="rules" label-width="80px">
                <el-form-item label="商品星级">
                    <el-rate
                      style="margin-top:12px"
                      v-model="OrdersAppraise.ordersStar"
                      :colors="colors">
                    </el-rate>
                </el-form-item>
                <el-form-item label="商品图片">
                  <el-upload
                    class="avatar-uploader"
                    style="width:700px"
                    action=""
                    :on-preview="handlePictureCardPreview"
                    :multiple="true"
                    :limit="3"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                    :on-change="handlechange"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg,.jpeg,.png,.gif"
                    :auto-upload="false"
                    :file-list="editOrderFileList"
                    >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="视频上传">
                  <el-upload
                    id="upload"
                    action="#"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUploadsp">  
                     <video
                      v-if="imageUrlsp"
                      :src="imageUrlsp"
                      class="avatar"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="评价内容" prop="ordersContent">
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="OrdersAppraise.ordersContent"
                    maxlength="50"
                    show-word-limit
                  >
                  </el-input>
                </el-form-item>
              </el-form>
              <el-button type="danger" style="width:180px;margin-top:30px" @click="getOrdersAppraise('OrdersAppraise')">提交</el-button>
            </el-col>
         </el-card>
     </div>
  </div>
</template>

<script>
export default {
  name: 'OrdersAppraiseList',
  data () {
    return {
      // 评分颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      fileList: [], // 图片集合
      // 回显图片集合
      editOrderFileList: [],
      // 新增多张图片路径
      dialogImageUrl: '',
      // 图片路径
      imageUrl: '',
      // 是否上传图片
      dialogVisible: false,
      // 商品评价集合
      OrdersAppraise: {
        ordersId: null,
        ordersStar: null,
        ordersContent: ''
      },
      // 视频上传
      imageUrlsp: '',
      // 上传路径
      imageFile: [],
      // 新增校验
      rules: {
          ordersContent: [
              { required: true, message: '不能为空', trigger: 'blur' }
          ],
      },
     
    }
  },
   created () {

  },
  mounted () {  
  },
  methods: {
    // 消息提示框
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    // 上传评价
    getOrdersAppraise(OrdersAppraise){
      var formdata = new FormData()
       formdata.set('ordersId', this.OrdersAppraise.ordersId = 1)
       formdata.set('ordersStar', this.OrdersAppraise.ordersStar)
       formdata.set('ordersContent', this.OrdersAppraise.ordersContent)
       formdata.set('ordersId', this.$route.query.orderNumber)
       formdata.set('commodityId', this.$route.query.commodityId)
      if (this.imageFile.name !== 'File') {
        formdata.set('file', this.imageFile, this.imageFile.name)
      }
       if (this.fileList.length > 0) {
         this.fileList.forEach((item) => {
           formdata.append('multipartFiles', item.raw)
         })
       }
      this.$refs[OrdersAppraise].validate((valid) => {
          if (valid) {
            this.$axios.post('/ordersAppraise/saveOrdersAppraise', formdata).then(res => {
                  if (res.data.obj > 0) {
                    this.message('恭喜你，保存数据成功！', 'success')
                    this.getScenicAll()
                    this.OrdersAppraise = {
                      ordersId: null,
                      ordersStar: 0,
                      ordersContent: ''
                    },
                    this.editOrderFileList = []
                    this.imageUrl = ''
                    this.fileList = []
                  } else {
                    this.message('对不起，保存失败！', 'warning')
                  }
                })
            }
        })
      },
    // 视频上传
    // 上传进度显示
    beforeAvatarUploadsp(file) {
          if (
          [
            'video/mp4',
            'video/ogg',
            'video/flv',
            'video/avi',
            'video/wmv',
            'video/rmvb'
          ].indexOf(file.type) === -1
        ) {
          this.$message.error('请上传正确的视频格式')
          return false
        }
        this.imageUrlsp = URL.createObjectURL(file)
        this.imageFile = file
      },
    handleAvatarSuccess(res, file) {
        this.imageUrlsp = URL.createObjectURL(file.raw);
      },

    // 图片上传
    handleExceed(files, fileList) {
      this.$message.warning(` 一次最多上传3张，请分批次上传! `)
    },
    // 图片上传监听文件 file
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 添加移出图片
    handlechange (fileList) {
      this.fileList.push(fileList)
    },
    handleRemove (file) { // 删除照片 文件列表移除文件的操作
      if (file.id) {
        const imageId = this.scenicForm.imageId
        let arrImgIds = imageId.split(',')
        arrImgIds = arrImgIds.filter((item) => {
          return item !== file.id && item !== ''
        })
        this.scenicForm.imageId = arrImgIds.join(',')
      } else {
        this.fileList = this.fileList.filter((item) => {
          return (file.name !== item.name && file.url !== item.url)
        })
      }
    },
     // 图片上传之前的校验方法
    beforeAvatarUpload (file) {
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpg'
      const isJPEG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.fileList.push(file)
      return true
    },
  }
}
</script>

<style scoped>
  .div_1{
    margin: 0 auto;
  }
  .div_2{
    text-align: center;
    margin-top:20px;
    font-family: 'Times New Roman',Times, serif;
    font-size: 25px;
  }
  .img_1{
    width: 280px;
    height: 280px;
    margin-top:80px;
    margin-left:30px
  }
  /* 视频上传 */
    #upload {
      border: 1px dashed #d9d9d9 !important;
    }
    .avatar-uploaders .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .avatar-uploaders .el-upload:hover {
      border: 1px dashed #d9d9d9 !important;
      border-color: #409eff;
    }
    #upload {
      font-size: 28px;
      color: #8c939d;
      width: 300px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 300px;
      height: 178px;
      display: block;
    }
</style>